<!doctype html>
<html>
<head>
<script src="//weixiao.qq.com/js/MTAH5/stats.js" id="WXH5" sid="500622700"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<meta charset="utf-8">
<title>魔镜魔镜</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="/smallQuestion/hui/css/weui.css"/>
  <link rel="stylesheet" href="/smallQuestion/hui/css/weui2.css"/>
  <link rel="stylesheet" href="/smallQuestion/hui/css/weui3.css"/>
  <script src="/smallQuestion/hui/js/zepto.min.js"></script> 
  <script src="/smallQuestion/hui/js/updown.js"></script>
  <script src="/smallQuestion/hui/js/lazyimg.js"></script> 
   <script src="/smallQuestion/hui/js/swipe.js"></script>
  
<script type="text/javascript">

function timestampToTime(timestamp) {
  var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  Y = date.getFullYear() + '-';
  M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
  D = date.getDate() + ' ';
  h = date.getHours() + ':';
  m = date.getMinutes() + ':';
  s = date.getSeconds();
  return Y+M+D;
}
$(function(){
  
  //轮播图
  
  $('#slide1').swipeSlide({
	autoSwipe:true,//自动切换默认是
	speed:3000,//速度默认4000
	continuousScroll:true,//默认否
	transitionType:'cubic-bezier(0.22, 0.69, 0.72, 0.88)',//过渡动画linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
	lazyLoad:true,//懒加载默认否
	firstCallback : function(i,sum,me){
	            me.find('.dot').children().first().addClass('cur');
	        },
	        callback : function(i,sum,me){
	            me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
	        }
	});
	
	$('#slide2').swipeSlide({
	autoSwipe:true,//自动切换默认是
	speed:3000,//速度默认4000
	continuousScroll:true,//默认否
	transitionType:'cubic-bezier(0.22, 0.69, 0.72, 0.88)',//过渡动画linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
	lazyLoad:true,//懒加载默认否
	firstCallback : function(i,sum,me){
	            me.find('.dot').children().first().addClass('cur');
	        },
	        callback : function(i,sum,me){
	            me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
	        }
	});
	$('#slide3').swipeSlide({
	autoSwipe:true,//自动切换默认是
	speed:3000,//速度默认4000
	continuousScroll:true,//默认否
	transitionType:'ease-in'
	});
  
//页数 
    var page = 0;
    // 每页展示10个
    var size =10;
    $('.weui_panel').dropload({
        scrollArea : window,
        autoLoad : true,//自动加载
  domDown : {//上拉
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
            domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
        },
        domUp : {//下拉
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh"><i class="icon icon-114"></i>上拉加载更多</div>',
            domUpdate  : '<div class="dropload-load f15"><i class="icon icon-20"></i>释放更新...</div>',
            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>'
        },
                loadUpFn : function(me){//刷新
            $.ajax({
                type: 'GET',
                url: '/smallQuestion/api/getTitleListByStatus?page=0&size=10&mediaKey=${mediaId}',
               
                dataType: 'json',
                success: function(data){
                    var result = '';
                    var arrLen = data.content.length;
                    if(arrLen > 0){
                    
                        for(var i=0; i<arrLen; i++){
                          result+='  <a href="/smallQuestion/front/question?titleId='+data.content[i].id+'" class="weui_media_box weui_media_appmsg">'
                    +'<div class="weui_media_hd weui-updown">'
                        +'<img class="weui_media_appmsg_thumb lazyload" src="'+data.content[i].tLogo+'" alt="" data-img="'+data.content[i].tLogo+'">'
                    +'</div>'
                    +'<div class="weui_media_bd">'
                        +'<h4 class="weui_media_title">'+data.content[i].tName+'</h4>'
                        +'<p class="weui_media_desc">'+timestampToTime(data.content[i].gmtUpdate)+'</p>'
                    +'</div>'
                +'</a>';
}
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.weui_panel_bd').html(result);
                        var lazyloadImg = new LazyloadImg({
			            el: '.weui-updown [data-img]', //匹配元素
			            top: 50, //元素在顶部伸出长度触发加载机制
			            right: 50, //元素在右边伸出长度触发加载机制
			            bottom: 50, //元素在底部伸出长度触发加载机制
			            left: 50, //元素在左边伸出长度触发加载机制
			            qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
			            load: function(el) {
			                el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
			            },
			            error: function(el) {
			
			            }
        });
                        // 每次数据加载完，必须重置
                        me.resetload();
                        // 重置索引值，重新拼接more.json数据
                        page = 1;
                        // 解锁
                        me.unlock();
                        me.noData(false);
                    },1000);
                },
                error: function(xhr, type){
                  console.log("ajax error!");
//                     alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadDownFn : function(me){//加载更多
         page++;
         window.history.pushState(null, document.title, window.location.href);
         var result = '';
            $.ajax({
                type: 'GET',
                url:'/smallQuestion/api/getTitleListByStatus?page='+(page-1)+'&size='+size+"&mediaKey=${mediaId}",
                dataType: 'json',
                success: function(data){
           var arrLen = data.content.length;
                    if(arrLen > 0){
                    
                        for(var i=0; i<arrLen; i++){
                          result+='  <a href="/smallQuestion/front/question?titleId='+data.content[i].id+'" class="weui_media_box weui_media_appmsg">'
                    +'<div class="weui_media_hd weui-updown">'
                        +'<img class="weui_media_appmsg_thumb lazyload" src="'+data.content[i].tLogo+'" alt="" data-img="'+data.content[i].tLogo+'">'
                    +'</div>'
                    +'<div class="weui_media_bd">'
                        +'<h4 class="weui_media_title">'+data.content[i].tName+'</h4>'
                        +'<p class="weui_media_desc">'+timestampToTime(data.content[i].gmtUpdate)+'</p>'
                    +'</div>'
                +'</a>';
}
                    // 如果没有数据
                    }else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }

                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.weui_panel_bd').append(result);  
                        var lazyloadImg = new LazyloadImg({
			            el: '.weui-updown [data-img]', //匹配元素
			            top: 50, //元素在顶部伸出长度触发加载机制
			            right: 50, //元素在右边伸出长度触发加载机制
			            bottom: 50, //元素在底部伸出长度触发加载机制
			            left: 50, //元素在左边伸出长度触发加载机制
			            qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
			            load: function(el) {
			                el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
			            },
			            error: function(el) {
			
			            }
        });
                       // 
                        // 每次数据加载完，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                  console.log("ajax error!");
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });
   
 
    
});
</script>      

 <style>
</style>
 
 
</head>

<body ontouchstart>
<div class="slide" id="slide1">
    <ul>
        <li>
            <a href="#">
                <img src="/smallQuestion/images/back1.png" alt="">
            </a>
<!--             <div class="slide-desc">我是标题</div> -->
        </li>
        <li>
            <a href="#">
                <img src="/smallQuestion/images/back2.png" alt="">
            </a>
<!--             <div class="slide-desc">我是标题</div> -->
        </li>
       <!--  <li>
            <a href="#">
                <img src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/2.jpg" alt="">
            </a>
            <div class="slide-desc">2零哥章魚 完成传奇世界H5-王者归来任务 获得30金币</div>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/3.jpg" alt="">
            </a>
            <div class="slide-desc">3零哥章魚 完成传奇世界H5-王者归来任务 获得30金币</div>
        </li> -->
    </ul>
    <div class="dot">
        <span></span>
        <span></span>
    </div>
    
</div>
    <div class="weui_panel weui_panel_access">
            
            <div class="weui_panel_bd">
            
              
   
            </div>
      </div>
      
      
		<!-- <div class="weui-footer weui-footer-fixed-bottom">
            <p class="weui-footer-links">
                <a href="javascript:;" class="weui-footer-link">WeUI首页</a>
            </p>
            <p class="weui-footer__text">Copyright &copy; 2008-2016 Yoby移植</p>
        </div> -->
        
    
     <script type="text/javascript">
      //分享  
        wx.config({
           debug: false,
           appId: "${wx.appId}",
           timestamp: "${wx.timestamp?c}",
           nonceStr: "${wx.nonceStr}",
           signature: "${wx.signature}",
           jsApiList: ["onMenuShareAppMessage","onMenuShareQQ","onMenuShareTimeline","onMenuShareQZone"]
         });
         wx.ready(function(){
           wx.onMenuShareAppMessage({
             title: "魔镜魔镜，快来发现有趣的自己",
             imgUrl: "${avatarImage}",
             link: "${wx.url}",
             desc: "测测你有多可爱吧",//分享描述
             success: function () { 
//               alert("发送给朋友");
               // 用户确认分享后执行的回调函数
           },
           cancel: function () { 
               // 用户取消分享后执行的回调函数
           }
           });
           wx.onMenuShareQQ({
             title: "魔镜魔镜，快来发现有趣的自己",
             imgUrl: "${avatarImage}",
             link: "${wx.url}",
             desc: "测测你有多可爱吧"//分享描述
           });
           wx.onMenuShareTimeline({
             title: "魔镜魔镜，快来发现有趣的自己",
             imgUrl: "${avatarImage}",
             link: "${wx.url}",
             desc: "测测你有多可爱吧",//分享描述
             success: function () { 
          },
           cancel: function () { 
           }
           });
           wx.onMenuShareQZone({
             title: "魔镜魔镜，快来发现有趣的自己",
             imgUrl: "${avatarImage}",
             link: "${wx.url}",
             desc: "测测你有多可爱吧"//分享描述
           });
      });
        
        </script>
</body>
</html>
